<template>
  <div>
    <h1>参与活动列表</h1>
    <el-form :inline="true" :model="listFrom" class="demo-form-inline">
      <el-form-item label="拼团活动名称">
        <el-input
          v-model="listFrom.keyWord"
          placeholder="请输入拼团活动名称"
          clearable
        />
      </el-form-item>
      <el-form-item label="时间区间查询">
        <el-date-picker
          v-model="listFrom.beginTime"
          type="datetime"
          placeholder="请选择开始时间"
        />-
        <el-date-picker
          v-model="listFrom.endTime"
          type="datetime"
          placeholder="请选择结束时间"
        />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="list()">查询</el-button>
        <el-button type="info" @click="ShowGroupJoin()"
          >添加参与活动信息</el-button
        >
      </el-form-item>
    </el-form>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="joinId" label="ID" />
      <el-table-column prop="activeName" label="活动名称" />
      <el-table-column prop="joinName" label="拼团活动名称" />
      <el-table-column prop="joinTip" label="拼团活动介绍" />
      <el-table-column prop="unitName" label="商品单位" />
      <el-table-column label="商品轮播图">
        <template #default="scope">
          <el-carousel height="50px">
            <el-carousel-item v-for="item in scope.row.imagesList" :key="item">
              <el-image
                :src="item"
                v-if="scope.row.imagesList != null"
                style="width: 50px; height: 50px"
              />
            </el-carousel-item>
          </el-carousel>
        </template>
      </el-table-column>
      <el-table-column prop="beginTime" label="活动开始时间" />
      <el-table-column prop="endTime" label="活动截止时间" />
      <el-table-column prop="expireTime" label="拼团时效" />
      <el-table-column prop="groupNum" label="拼团人数" />
      <el-table-column prop="buyMax" label="总购买数量" />
      <el-table-column prop="virtualNum" label="补齐人数" />
      <el-table-column prop="prodPrice" label="商品原价" />
      <el-table-column prop="groupPrice" label="拼团价格" />
      <el-table-column prop="prodName" label="拼团商品名称" />
      <el-table-column prop="kindName" label="配送方式" />
      <el-table-column prop="payName" label="运费方式" />
      <el-table-column prop="sendMoney" label="运费" />
      <el-table-column prop="joinTop" label="排序" />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="success" @click="OnUpdateGroup(scope.row)"
            >修改</el-button
          >
          <el-button type="danger" @click="OnDeleteGroup(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="demo-pagination-block">
      <div class="demonstration"></div>
      <el-pagination
        v-model:current-page="listFrom.pageNum"
        v-model:page-size="listFrom.pageSize"
        :page-sizes="[2, 4, 6, 8]"
        :background="true"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- 添加 -->
    <div>
      <el-dialog
        v-model="dialogFormVisible"
        title="添加参与活动页面"
        width="1000"
      >
        <el-form
          :model="form"
          class="demo-form-inline"
          :inline="true"
          :rules="rules"
          ref="ruleFormRef"
          label-width="auto"
        >
          <el-form-item
            label="活动名称"
            :label-width="formLabelWidth"
            prop="activeId"
          >
            <el-select
              v-model="form.activeId"
              placeholder="请选择活动名称"
              clearable
              style="width: 160px"
            >
              <el-option
                v-for="item in activeList"
                :key="item.activeId"
                :label="item.activeName"
                :value="item.activeId"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            label="拼团活动名称"
            :label-width="formLabelWidth"
            prop="joinName"
          >
            <el-input v-model="form.joinName" autocomplete="off" />
          </el-form-item>
          <el-form-item
            label="拼团活动介绍"
            :label-width="formLabelWidth"
            prop="joinTip"
          >
            <el-input v-model="form.joinTip" type="textarea" />
          </el-form-item>
          <el-form-item
            label="商品单位"
            :label-width="formLabelWidth"
            prop="prodUnit"
          >
            <el-select
              v-model="form.prodUnit"
              placeholder="请选择商品单位"
              clearable
              style="width: 160px"
            >
              <el-option
                v-for="item in unitList"
                :key="item.dictId"
                :label="item.dictName"
                :value="item.dictValue"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            label="商品轮播图"
            :label-width="formLabelWidth"
            prop="fileList"
          >
            <el-upload
              v-model:file-list="form.fileList"
              action="http://localhost:10010/prod/type/uploadFile"
              :headers="headers"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
            >
              <el-icon><Plus /></el-icon>
            </el-upload>

            <el-dialog v-model="dialogVisible">
              <img w-full :src="dialogImageUrl" alt="Preview Image" />
            </el-dialog>
          </el-form-item>
          <el-form-item
            label="活动时间"
            :label-width="formLabelWidth"
            prop="getGroupTime"
          >
            <el-date-picker
              v-model="form.getGroupTime"
              type="datetimerange"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              format="YYYY-MM-DD HH:mm:ss"
              date-format="YYYY/MM/DD ddd"
              time-format="A hh:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss"
            />
          </el-form-item>
          <el-form-item
            label="拼团时效"
            :label-width="formLabelWidth"
            prop="expireTime"
          >
            <el-input-number
              v-model="form.expireTime"
              :min="1"
              :max="10000000000"
              @change="handleChange"
            />
          </el-form-item>
          <el-form-item
            label="拼团人数"
            :label-width="formLabelWidth"
            prop="groupNum"
          >
            <el-input-number
              v-model="form.groupNum"
              :min="1"
              :max="100000000000"
              @change="handleChange"
            />
          </el-form-item>
          <el-form-item
            label="总购买数量"
            :label-width="formLabelWidth"
            prop="buyMax"
          >
            <el-input-number
              v-model="form.buyMax"
              :min="1"
              :max="10000000000000"
              @change="handleChange"
            />
          </el-form-item>
          <el-form-item
            label="补齐人数"
            :label-width="formLabelWidth"
            prop="virtualNum"
          >
            <el-input-number
              v-model="form.virtualNum"
              :min="1"
              :max="10000000000"
              @change="handleChange"
            />
          </el-form-item>
          <el-form-item
            label="商品原价"
            :label-width="formLabelWidth"
            prop="prodPrice"
          >
            <el-input-number
              v-model="form.prodPrice"
              :precision="2"
              :step="0.1"
              :max="1000000000000000000"
            />
          </el-form-item>
          <el-form-item
            label="拼团价格"
            :label-width="formLabelWidth"
            prop="groupPrice"
          >
            <el-input-number
              v-model="form.groupPrice"
              :precision="2"
              :step="0.1"
              :max="100000000000000000"
            />
          </el-form-item>
          <el-form-item
            label="拼团商品名称"
            :label-width="formLabelWidth"
            prop="prodInfoId"
          >
            <el-select
              v-model="form.prodInfoId"
              placeholder="请选择拼团商品名称"
              clearable
              style="width: 160px"
            >
              <el-option
                v-for="item in prodList"
                :key="item.infoId"
                :label="item.prodName"
                :value="item.infoId"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            label="配送方式"
            :label-width="formLabelWidth"
            prop="sendKind"
          >
            <el-select
              v-model="form.sendKind"
              placeholder="请选择配送方式"
              clearable
              style="width: 160px"
            >
              <el-option
                v-for="item in kindList"
                :key="item.dictId"
                :label="item.dictName"
                :value="item.dictValue"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            label="运费方式"
            :label-width="formLabelWidth"
            prop="sendPay"
          >
            <el-select
              v-model="form.sendPay"
              placeholder="请选择运费方式"
              clearable
              style="width: 160px"
            >
              <el-option
                v-for="item in payList"
                :key="item.dictId"
                :label="item.dictName"
                :value="item.dictValue"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            label="运费"
            :label-width="formLabelWidth"
            prop="sendMoney"
          >
            <el-input-number
              v-model="form.sendMoney"
              :precision="2"
              :step="0.1"
              :max="1000000000000000"
            />
          </el-form-item>
          <el-form-item
            label="排序"
            :label-width="formLabelWidth"
            prop="joinTop"
          >
            <el-input-number
              v-model="form.joinTop"
              :min="1"
              :max="10000000000000"
              @change="handleChange"
            />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取消</el-button>
            <el-button type="primary" @click="submitForm(ruleFormRef)">
              保存
            </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
    <!-- 修改页面 -->
    <div>
      <el-dialog
        v-model="dialogTableVisible"
        title="修改参与活动页面"
        width="1000"
      >
        <el-form
          :model="form"
          class="demo-form-inline"
          :inline="true"
          :rules="rules"
          ref="ruleFormRef"
          label-width="auto"
        >
          <el-form-item label="活动名称" :label-width="formLabelWidth">
            <el-select
              v-model="form.activeId"
              placeholder="请选择活动名称"
              clearable
              style="width: 160px"
            >
              <el-option
                v-for="item in activeList"
                :key="item.activeId"
                :label="item.activeName"
                :value="item.activeId"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="拼团活动名称" :label-width="formLabelWidth">
            <el-input v-model="form.joinName" autocomplete="off" />
          </el-form-item>
          <el-form-item label="拼团活动介绍" :label-width="formLabelWidth">
            <el-input v-model="form.joinTip" type="textarea" />
          </el-form-item>
          <el-form-item label="商品单位" :label-width="formLabelWidth">
            <el-select
              v-model="form.prodUnit"
              placeholder="请选择商品单位"
              clearable
              style="width: 160px"
            >
              <el-option
                v-for="item in unitList"
                :key="item.dictId"
                :label="item.dictName"
                :value="item.dictValue"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="商品轮播图" :label-width="formLabelWidth">
            <el-upload
              v-model:file-list="form.fileList"
              action="http://localhost:10010/prod/type/uploadFile"
              :headers="headers"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
            >
              <el-icon><Plus /></el-icon>
            </el-upload>

            <el-dialog v-model="dialogVisible">
              <img w-full :src="dialogImageUrl" alt="Preview Image" />
            </el-dialog>
          </el-form-item>
          <el-form-item label="活动开始时间" :label-width="formLabelWidth">
            <el-date-picker
              v-model="form.beginTime"
              type="datetime"
              placeholder="Select date and time"
            />
          </el-form-item>
          <el-form-item label="活动结束时间" :label-width="formLabelWidth">
            <el-date-picker
              v-model="form.endTime"
              type="datetime"
              placeholder="Select date and time"
            />
          </el-form-item>
          <el-form-item label="拼团时效" :label-width="formLabelWidth">
            <el-input-number
              v-model="form.expireTime"
              :min="1"
              :max="10000000000"
              @change="handleChange"
            />
          </el-form-item>
          <el-form-item label="拼团人数" :label-width="formLabelWidth">
            <el-input-number
              v-model="form.groupNum"
              :min="1"
              :max="100000000000"
              @change="handleChange"
            />
          </el-form-item>
          <el-form-item label="总购买数量" :label-width="formLabelWidth">
            <el-input-number
              v-model="form.buyMax"
              :min="1"
              :max="10000000000000"
              @change="handleChange"
            />
          </el-form-item>
          <el-form-item label="补齐人数" :label-width="formLabelWidth">
            <el-input-number
              v-model="form.virtualNum"
              :min="1"
              :max="10000000000"
              @change="handleChange"
            />
          </el-form-item>
          <el-form-item label="商品原价" :label-width="formLabelWidth">
            <el-input-number
              v-model="form.prodPrice"
              :precision="2"
              :step="0.1"
              :max="1000000000000000000"
            />
          </el-form-item>
          <el-form-item label="拼团价格" :label-width="formLabelWidth">
            <el-input-number
              v-model="form.groupPrice"
              :precision="2"
              :step="0.1"
              :max="100000000000000000"
            />
          </el-form-item>
          <el-form-item label="拼团商品名称" :label-width="formLabelWidth">
            <el-select
              v-model="form.prodInfoId"
              placeholder="请选择拼团商品名称"
              clearable
              style="width: 160px"
            >
              <el-option
                v-for="item in prodList"
                :key="item.infoId"
                :label="item.prodName"
                :value="item.infoId"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="配送方式" :label-width="formLabelWidth">
            <el-select
              v-model="form.sendKind"
              placeholder="请选择配送方式"
              clearable
              style="width: 160px"
            >
              <el-option
                v-for="item in kindList"
                :key="item.dictId"
                :label="item.dictName"
                :value="item.dictValue"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="运费方式" :label-width="formLabelWidth">
            <el-select
              v-model="form.sendPay"
              placeholder="请选择运费方式"
              clearable
              style="width: 160px"
            >
              <el-option
                v-for="item in payList"
                :key="item.dictId"
                :label="item.dictName"
                :value="item.dictValue"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="运费" :label-width="formLabelWidth">
            <el-input-number
              v-model="form.sendMoney"
              :precision="2"
              :step="0.1"
              :max="1000000000000000"
            />
          </el-form-item>
          <el-form-item label="排序" :label-width="formLabelWidth">
            <el-input-number
              v-model="form.joinTop"
              :min="1"
              :max="10000000000000"
              @change="handleChange"
            />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取消</el-button>
            <el-button type="primary" @click="OnUpdateGroupJoin()">
              修改
            </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, reactive, ref } from "vue";
import {
  getGroupInfoList,
  getProdInfoList,
  getDictList,
  addGroupInfo,
  selectGroupActive,
  updateGroupInfo,
  deleteGroupJoin,
} from "../api/api";
import { Plus } from "@element-plus/icons-vue";
import {
  ElMessage,
  ElMessageBox,
  type UploadProps,
  type UploadUserFile,
} from "element-plus";
import type { FormInstance, FormRules } from "element-plus";
const ruleFormRef = ref<FormInstance>();
const tableData = ref([]);
const total = ref(0);
const dialogTableVisible = ref(false);
const dialogFormVisible = ref(false);
const formLabelWidth = "140px";
const dialogImageUrl = ref("");
const prodList = ref([]);
const payList = ref([]);
const activeList = ref([]);
const kindList = ref([]);
const unitList = ref([]);
const dialogVisible = ref(false);
const fileList = ref<UploadUserFile[]>([]);
const listFrom = ref({
  pageNum: 1,
  pageSize: 2,
  keyWord: "",
  beginTime: "",
  endTime: "",
});
const form = ref({
  activeId: null,
  activeName: "",
  beginTime: "",
  buyMax: null,
  createTime: "",
  endTime: "",
  expireTime: null,
  groupNum: null,
  groupPrice: null,
  joinId: null,
  joinImages: "",
  joinName: "",
  joinTip: "",
  joinTop: null,
  kindName: "",
  payName: "",
  prodInfoId: null,
  prodName: "",
  prodPrice: null,
  prodUnit: null,
  sendKind: null,
  sendMoney: null,
  sendPay: null,
  unitName: "",
  virtualNum: null,
  getGroupTime: [],
  fileList: [],
});
//列表
const list = () => {
  getGroupInfoList(listFrom.value).then((res) => {
    if (res.data.code == 200) {
      tableData.value = res.data.data.records;
      total.value = res.data.data.total;
    }
  });
};
//分页
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
  listFrom.value.pageSize = val;
  list();
};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
  listFrom.value.pageNum = val;
  list();
};
//添加
const ShowGroupJoin = () => {
  debugger;
  dialogFormVisible.value = true;
};
//轮播图
const headers = ref({
  token: window.sessionStorage.getItem("token"),
});
const handleRemove: UploadProps["onRemove"] = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles);
};
const handlePictureCardPreview: UploadProps["onPreview"] = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url!;
  dialogVisible.value = true;
};
//数字选择框
const handleChange = (value: number | undefined) => {
  console.log(value);
};
//校验
const rules = reactive<FormRules>({
  joinName: [
    { required: true, message: "请输入拼团活动名称", trigger: "blur" },
  ],
  activeId: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
  joinTip: [{ required: true, message: "请输入活动介绍", trigger: "blur" }],
  prodUnit: [{ required: true, message: "请选择拼团单位", trigger: "blur" }],
  expireTime: [{ required: true, message: "请选择拼团时效", trigger: "blur" }],
  groupNum: [{ required: true, message: "请选择拼团人数", trigger: "blur" }],
  buyMax: [{ required: true, message: "请选择购买总数量", trigger: "blur" }],
  virtualNum: [
    { required: true, message: "请选择拼团补齐人数", trigger: "blur" },
  ],
  prodPrice: [{ required: true, message: "请选择商品原价", trigger: "blur" }],
  groupPrice: [{ required: true, message: "请选择拼团价格", trigger: "blur" }],
  prodInfoId: [{ required: true, message: "请选择拼团商品", trigger: "blur" }],
  sendKind: [{ required: true, message: "请选择配送方式", trigger: "blur" }],
  sendPay: [{ required: true, message: "请选择运费方式", trigger: "blur" }],
  sendMoney: [{ required: true, message: "请选择运费", trigger: "blur" }],
  joinTop: [{ required: true, message: "请选择排序", trigger: "blur" }],
  getGroupTime: [
    {
      required: true,
      message: "请选择活动开始时间和结束时间",
      trigger: "blur",
    },
  ],
  fileList: [
    { required: true, message: "请上传商品轮播图片", trigger: "blur" },
  ],
});
//添加
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log("submit!");
      let attaImagesList: any = [];
      form.value.fileList.forEach((item) => {
        attaImagesList.push(item.response.data);
      });
      form.value.joinImages = JSON.stringify(attaImagesList);
      addGroupInfo(form.value).then((res) => {
        if (res.data.code == 200) {
          ElMessage.success("添加参与活动成功!");
          dialogFormVisible.value = false;
          list();
        } else {
          ElMessage.error(res.data.msg);
        }
      });
    } else {
      console.log("error submit!", fields);
    }
  });
};
//修改
const OnUpdateGroup = (row: any) => {
  form.value = row;
  dialogTableVisible.value = true;
};
const OnUpdateGroupJoin = () => {
  updateGroupInfo(form.value).then((res) => {
    if (res.data.code == 200) {
      ElMessage.success("用户修改成功!");
      dialogTableVisible.value = false;
      list();
    } else {
      ElMessage.error(res.data.msg);
    }
  });
};
//删除
const OnDeleteGroup = (row: any) => {
  ElMessageBox.confirm("请您三思啊，确定要删除吗?", "删除严重警告框", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "error",
  })
    .then(() => {
      deleteGroupJoin(row.joinId).then((res) => {
        if (res.data.code == 200) {
          ElMessage.success("用户删除成功!");
          list();
        } else {
          ElMessage.error(res.data.msg);
        }
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "用户取消删除",
      });
    });
};
onMounted(() => {
  list();
  //商品名称
  getProdInfoList().then((res) => {
    prodList.value = res.data.data;
  });
  //字典获取数据
  getDictList(11).then((res) => {
    if (res.data.code == 200) {
      payList.value = res.data.data;
    }
  });
  getDictList(10).then((res) => {
    if (res.data.code == 200) {
      kindList.value = res.data.data;
    }
  });
  getDictList(9).then((res) => {
    if (res.data.code == 200) {
      unitList.value = res.data.data;
    }
  });
  selectGroupActive().then((res) => {
    if (res.data.code == 200) {
      activeList.value = res.data.data;
    }
  });
});
</script>
